<template>
  <div>
    <div class='pds-tip'>
      <el-form :inline="true" class="filter">
        <el-form-item label="树类别:">
          <el-select v-model="typeId" placeholder="请选择类别" @change="getTree">
            <el-option v-for="item in typeList" :key="'type'+item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="产品小类:">
          <el-cascader :options="categoryList" :props="{value:'id'}" v-model="categoryId" @change="getTree" placeholder="请选择产品小类"></el-cascader>
        </el-form-item>
      </el-form>
    </div>
    <el-card class="box-card">
      <div class="filter-container">
        <el-button type="primary" icon="el-icon-circle-plus-outline" :disabled="!(typeId && categoryId.length)" @click="editNode('add')">添加</el-button>
      </div>
      <!-- <el-tree class="filter-tree" :data="tableData" :props="defaultProps" @node-click="editNode" default-expand-all highlight-current node-key="id" ref="tableData"></el-tree> -->
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="nameCn" label="中文名称">
        </el-table-column>
        <el-table-column prop="nameEn" label="英文名称">
        </el-table-column>
        <el-table-column label="操作" min-width="50%">
          <template slot-scope="scope">
            <el-button type="primary" @click="editNode(scope.row)">修改</el-button>
            <el-button type="danger" @click="delNode(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-dialog title="编辑" :visible.sync="dialogVisible" width="30%">
      <el-form>
        <el-form-item label="中文名称">
          <el-input v-model="editForm.nameCn"></el-input>
        </el-form-item>
        <el-form-item label="英文名称">
          <el-input v-model="editForm.nameEn"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import * as baseApi from '@/api/product/index';
  import * as conApi from '@/api/product/config';
  export default {
    name: 'ProductConfigModuleTree',
    data() {
      return {
        typeList: [{
          id: 1,
          name: '颜色'
        },
        {
          id: 2,
          name: '附件'
        },
        {
          id: 3,
          name: '特征'
        }
        ],
        typeId: null,
        categoryList: [],
        categoryId: [],
        tableData: [],
        dialogVisible: false,
        editForm: {}
      }
    },
    mounted() {
      this.refresh()
    },
    methods: {
      refresh() {
        this.getCategoryList();
        this.typeId = null;
        this.categoryId = []
        this.tableData = []
        this.dialogVisible = false
        this.editForm = {}
      },
      /* 获取产品小类 */
      getCategoryList() {
        baseApi.getPdsConfCategoryTree().then(res => {
          this.categoryList = res.data
          console.log(res)
        })
      },
      /* 获取产品树 */
      getTree() {
        if (this.typeId && this.categoryId.length) {
          conApi.getConTree({
            type: this.typeId,
            productCategoryId: this.categoryId.slice(-1)[0]
          }).then(res => {
            this.tableData = res.data;
            console.log(res)
          })
        } else return
      },
      /* 添加 */
      editNode(item) {
        if (item === 'add') { /* 添加 */
          this.editForm = {
            nameCn: '',
            nameEn: ''
          }
        } else { /* 修改 */
          this.editForm = JSON.parse(JSON.stringify(item));
        }
        this.dialogVisible = true;
      },
      delNode(id) {
        conApi.delCon({
          id
        }).then(res => {
          if (res.code === 200) {
            this.$message.success('删除成功');
            this.getTree();
          }
        })
      },
      submit() {
        if (!this.editForm.nameCn && !this.editForm.nameEn) {
          this.$message.warning('请填写配置名称');
          return;
        }
        const params = {
          ...this.editForm,
          parentId: 0,
          productCategoryId: this.categoryId.slice(-1)[0],
          type: this.typeId
        }
        conApi.upsertCon(params).then(res => {
          if (res.code === 200) {
            this.dialogVisible = false;
            this.$message.success((params.id ? '修改' : '添加') + '成功');
            this.getTree()
          }
        })
      }
    }
  }

</script>
